import React from 'react';
import './ModPwd.less';
import { Form, Icon, Input, Button,Spin, message } from 'antd';
import {withRouter} from "react-router-dom";
import {updatePwd} from "../../../service/api";
import md5 from 'blueimp-md5';
const FormItem = Form.Item;

class ModPwdForm extends React.Component {

    state = {
        loading: false,
        confirmDirty: false
    }
    handleSubmit = (e) => {
        e.preventDefault();
        let self = this;
        this.props.form.validateFields((err, values) => {
            if (!err) {
                self.setState({loading: true});
                values.f_passwd = md5(values.f_passwd)
                values.f_new_passwd = md5(values.f_new_passwd)
                delete values.confirm;
                updatePwd(values).then(function (data) {

                    if(data.code === 200){
                        message.success("修改成功!")
                        self.props.form.resetFields();
                    }else{
                        message.error(data.msg);
                    }


                })
                    .catch(function (err) {
                        console.log(err)
                    })
                self.setState({loading: false});
            }
        });
    }
    componentDidMount () {

    }

    validateToNextPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
            form.validateFields(['confirm'], { force: true });
        }
        callback();
    }

    compareToFirstPassword = (rule, value, callback) => {
        const form = this.props.form;
        console.log(value);
        if (value && value !== form.getFieldValue('f_new_passwd')) {
            callback('两次密码不一致!');
        } else {
            callback();
        }
    }

    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }

    render(){
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="loginPage">
                <div className="loginTitle">
                    密码修改
                </div>
                <div className="loginForm">
                    <Spin spinning={this.state.loading}>
                        <Form onSubmit={this.handleSubmit} className="loginForm">
                            <FormItem>
                                {getFieldDecorator('f_passwd', {
                                    rules: [{ required: true, message: '请填写密码!' }],
                                })(
                                    <Input autoFocus prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('f_new_passwd', {
                                    rules: [
                                        { required: true, message: '请填写新密码!' },
                                        {validator: this.validateToNextPassword}
                                        ],
                                })(
                                    <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="新密码" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('confirm', {
                                    rules: [
                                        { required: true, message: '请确认新密码!' },
                                        {validator: this.compareToFirstPassword}
                                        ],
                                })(
                                    <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} onBlur={this.handleConfirmBlur} type="password" placeholder="确认新密码" />
                                )}
                            </FormItem>
                            <FormItem>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    提交
                                </Button>
                            </FormItem>
                        </Form>
                    </Spin>
                </div>
            </div>
        )
    }
}

const ModPwd = Form.create()(ModPwdForm);
export default withRouter(ModPwd);
